<template>
	<div>
		<a href="javascript:void(0)" @click="showRecipe">处方笺</a>
		<el-dialog
		  title="开具处方笺界面"
		  :visible.sync="recipeDialog"
		  width="1360px"
		  top="1vh"
		  :append-to-body="true"
		  center>
		  <div>
		  	<el-row>
			  	<el-col :span="13" class="recipeTop">开药操作界面</el-col>
			  	<el-col :span="11" class="recipeTop">处方预览界面</el-col>
			</el-row>
			<el-row>
				<el-col :span="13" class="content">
					<el-row>
			  			<!-- 1号药 -->
			  			<el-col class="drugs" v-for="(item,index) in recipeObj" :key="index"  v-show="item.isShow">
			  				<el-row>
			  					<!-- 1号药第1个药物 -->
			  					<el-col :span="9" class="thTitle">
			  						药名
			  					</el-col>
			  					<el-col :span="6" class="thTitle">
			  						规格
			  					</el-col>
			  					<el-col :span="4" class="thTitle">
			  						数量
			  					</el-col>
			  					<el-col :span="4" class="thTitle">
			  						单剂量
			  					</el-col>
			  					<el-col>
			  						<el-row v-for="(drug,inde) in item.drugs" :key="inde">
			  							<el-col :span="9" class="drug">
					  						<el-autocomplete class="recipe userSearch" 
												v-model="drug.name"
												:fetch-suggestions="queryDrug"
												@select="((item)=>{confirmDrug(item,index,inde)})"
												style="width:100%;">
											</el-autocomplete>
					  					</el-col>
					  					<el-col :span="6" class="drug">
					  						<el-input v-model="drug.spec" class="recipe"></el-input>
					  					</el-col>
					  					<el-col :span="4" class="drug">
					  						<el-input-number style="width:100px;" size="mini" :min="1" v-model="drug.number"></el-input-number>
					  					</el-col>
					  					<el-col :span="4" class="drug">
					  						<el-input v-model="drug.single" class="recipe"></el-input>
					  					</el-col>
					  					<el-col :span="1" class="drug">
					  						<span @click="removeDrug(index,inde)">-</span>
					  					</el-col>
			  						</el-row>
			  					</el-col>
			  					<el-col><span @click="addDrug(index)">+</span></el-col>

			  				</el-row>
			  				<!-- 1号药用法 -->
			  				<el-row>
			  					<el-col :span="6">
			  						用法:
			  						<el-select style="width:100px;" class="recipe" size="mini" v-model="item.usage" placeholder="请选择" clearable>
									    <el-option
									      v-for="uag in usages"
									      :key="uag.value"
									      :label="uag.label"
									      :value="uag.value">
									    </el-option>
									</el-select>
			  					</el-col>
			  					<el-col :span="5">
			  						频次:
			  						<el-select style="width:90px;" class="recipe" size="mini" v-model="item.frequency" placeholder="请选择" clearable>
									    <el-option
									      v-for="fqy in frequencys"
									      :key="fqy.value"
									      :label="fqy.label"
									      :value="fqy.value">
									    </el-option>
									</el-select>
			  					</el-col>
			  					<el-col :span="5">
			  						疗程:
			  						<el-autocomplete class="recipe userSearch" 
										v-model="item.course"
										:fetch-suggestions="queryCourse"
										style="width:70px;">
									</el-autocomplete>
			  					</el-col>
			  					<el-col :span="5" v-if="item.needTest=='1'">
			  						皮试:
			  						<el-select style="width:80px;" class="recipe" size="mini" v-model="item.skinTest" clearable placeholder="">
									    <el-option
									      v-for="skt in skinTests"
									      :key="skt.value"
									      :label="skt.label"
									      :value="skt.value">
									    </el-option>
									</el-select>
			  					</el-col>
			  					<el-col :span="5" v-if="item.needTest!='1'">
			  						&nbsp;
			  					</el-col>
			  					<el-col :span="3" style="text-align:right">
			  						<span @click="removeDrugs(index)">--</span>
			  					</el-col>
			  				</el-row>
			  			</el-col>
			  		</el-row>
			  		<el-row>
			  			<el-col>
			  				<span @click="addDrugs">++</span>
			  			</el-col>
			  		</el-row>
				</el-col>
				<el-col :span="11" class="content">
					<el-row>
						<el-col class="reciprTitle">普通处方笺</el-col>
						<el-col :span="6" class="infoBar">
							<label>姓名：</label>李明
						</el-col>
						<el-col :span="5" class="infoBar">
							<label>性别：</label>男
						</el-col>
						<el-col :span="6" class="infoBar">
							<label>年龄：</label>26
						</el-col>
						<el-col :span="7" class="infoBar">
							<label>电话：</label>
						</el-col>
						<el-col :span="6" class="infoBar">
							<label>科别：</label>
						</el-col>
						<el-col :span="5" class="infoBar">
							<label>床号：</label>
						</el-col>
						<el-col :span="6" class="infoBar">
							<label>门诊号：</label>
						</el-col>
						<el-col :span="7" class="infoBar">
							<label>住院号：</label>
						</el-col>
						<el-col class="infoBar">
							<label>临床诊断：</label>流行性感冒
						</el-col>
						<el-col class="rp">Rp:</el-col>
						<el-col class="recipeBar" v-for="(item,index) in recipeObj" :key="index" @click.native="reShow(index)">
							<!-- 单个药品时 -->
							<el-row v-if="item.drugs.length==1" v-for="(drug,inde) in item.drugs" :key="inde">
								<el-col>
									{{drug.name}}&emsp;({{drug.spec}})×{{drug.number}}&emsp;
									<span v-show="drug.needTest=='1'">
										（皮试：{{item.skinTest?item.skinTest:"_____"}}）
									</span>
								</el-col>
								<el-col><label>sig:</label>&emsp;{{drug.single}}&emsp;{{item.usage}}&emsp;{{item.frequency}}×{{item.course}}</el-col>
							</el-row>
							<!-- 多个药品时 -->
							<el-row v-if="item.drugs.length>1">
								<el-col>
									<el-row>
										<el-col v-for="(drug,inde) in item.drugs" :key="inde">
											{{drug.name}}&emsp;({{drug.spec}})×{{drug.number}}&emsp;
											<span v-show="drug.needTest=='1'">
												（皮试：{{item.skinTest?item.skinTest:"_____"}}）
											</span>
										</el-col>
									</el-row>
								</el-col>
								<el-col>
									<el-row> 
										<el-col :span="2"><label>sig:</label></el-col>
										<el-col :span="14">
											<el-row>
												<el-col v-for="(drug,inde) in item.drugs" :key="inde">
													{{drug.name}}&nbsp;{{drug.single}}
												</el-col>
											</el-row>
										</el-col>
										<el-col :span="1" class="line">
											<br v-for="(drug,inde) in item.drugs" :key="inde">
										</el-col>
										<el-col :span="7" :style="'line-height:'+item.drugs.length*30+'px'">
											&nbsp;{{item.usage}}&nbsp;{{item.frequency}}×{{item.course}}
										</el-col>
									</el-row>
								</el-col>
							</el-row>
						</el-col>
					</el-row>
				</el-col>
			</el-row>
		  </div>
		  <span slot="footer" class="dialog-footer">
		    <el-button type="primary" @click="recipeDialog = false">关 闭</el-button>
		    <el-button type="primary" @click="confirmRecipe">确认保存</el-button>
		  </span>
		</el-dialog>
	</div>	
</template>
<script type="text/javascript">
export default{
	name:"Recipe",
	data(){
		return {
			recipeDialog: false,
			num: 1,
			recipeObj:[{
				drugs:[{
					name:"",
					spec:"",
					number:"1",
					single:"",
					needTest:"0",
				}],
				skinTest:"",
				needTest:"0",
				usage:"",
				frequency:"",
				course:"",
				isShow: 1
			}],
			curRecipe:{},
			usages:[{
				label: "口服",
				value: "po"
			},{
				label: "皮内注射",
				value: "id"
			},{
				label: "皮下注射",
				value: "ih"
			},{
				label: "肌内注射",
				value: "im"
			},{
				label: "静脉注射",
				value: "iv"
			},{
				label: "静脉滴注",
				value: "iv.gtt"
			},{
				label: "外用",
				value: "ad.us.ext."
			},{
				label: "内服",
				value: "ad.us.int."
			},{
				label: "吸入",
				value: "inhal"
			},{
				label: "睡前",
				value: "hs"
			},{
				label: "饭前",
				value: "ac"
			},{
				label: "饭后",
				value: "pc"
			},{
				label: "空腹时",
				value: "aj"
			}],
			frequencys:[{
				label: "立即",
				value: "st"
			},{
				label: "必要时",
				value: "prn"
			},{
				label: "每1小时",
				value: "qh"
			},{
				label: "每2小时",
				value: "q2h"
			},{
				label: "每8小时",
				value: "q8h"
			},{
				label: "每日1次",
				value: "Qd"
			},{
				label: "每日2次",
				value: "Bid"
			},{
				label: "每日3次",
				value: "Tid"
			},{
				label: "每日4次",
				value: "Qid"
			},{
				label: "每周1次",
				value: "Qw"
			},{
				label: "每周2次",
				value: "Biw"
			},{
				label: "每晨1次",
				value: "qm"
			},{
				label: "每晚1次",
				value: "qn"
			},{
				label: "隔日1次",
				value: "qod"
			}],
			skinTests:[{
				label: "阳性",
				value: "阳性"
			},{
				label: "阴性",
				value: "阴性"
			}]
		}
	},
	computed:{
			patient:{
				set(value){
				},
				get(){
					return this.$store.state.patient;
				}
			},
		},
	methods:{
		showRecipe:function(){
			//有nodeUUID直接更新，无就生成
				var vm =this;
				if (!this.patient.nodeUUID) {
					this.patient.nodeUUID = this.commonUtil.guid();
					if (this.patient.patientUUID) {
						//更新患者信息的nodeUUID
						vm.$axios.setNodeUUID(vm.patient.patientUUID,vm.patient.nodeUUID).then(function(res){
							vm.recipeDialog = true;
						});
					}else{
						vm.recipeDialog = true;
					}
				}else{
					//根据nodeUUID调取处方信息
					vm.$axios.queryRecipe(vm.patient.nodeUUID).then(function(res){
						if (res.data&&res.data.data&&res.data.data.length>0) {
							vm.curRecipe = res.data.data[0];
							vm.recipeObj = JSON.parse(res.data.data[0].content);
						}
						vm.recipeDialog = true;
					});
					vm.recipeDialog = true;
				}
		},
		queryDrug:function(queryString, cb){
				if (!queryString) {
					return false;
				}
				var vm =this;
				vm.$axios.getDrugs(queryString).then(function(res){
					var result = res.data.data;
					result.forEach(function(drug){
						drug.value = drug.drugName+"---"+drug.drugSpec;
					});
					cb(result);
				},function(res){
					console.log("error:"+res);
				});
			},
			confirmDrug:function(item,index,inde){
				var vm = this;
				vm.recipeObj[index].drugs[inde].name = item.drugName;
				vm.recipeObj[index].drugs[inde].spec = item.drugSpec;
				vm.recipeObj[index].drugs[inde].number = 1;
				vm.recipeObj[index].drugs[inde].needTest = item.needTest;
				if (item.needTest=="1") {
					vm.recipeObj[index].needTest = "1";
				}
			},
			removeDrug:function(index,inde){
				var vm = this;
				if (vm.recipeObj[index].drugs.length==1) {
					vm.removeDrugs(index);
				}else{
					vm.recipeObj[index].drugs.splice(inde,1);
					let needTest = "0";
					vm.recipeObj[index].drugs.forEach(function(drug){
						if (drug.needTest=="1") {
							needTest = "1";
						}
					});
					vm.recipeObj[index].needTest = needTest;
				}
			},
			removeDrugs:function(index){
				this.recipeObj.splice(index,1);
			},
			addDrug:function(index){
				var vm =this;
				vm.recipeObj[index].drugs.push({
					name:"",
					spec:"",
					number:"1",
					single:"",
					needTest:"0",
				});
			},
			addDrugs:function(){
				var vm = this;
				vm.recipeObj.forEach(function(item){
					item.isShow = 0 ;
				});
				vm.recipeObj.push({
					drugs:[{
						name:"",
						spec:"/",
						number:"1",
						single:"",
						needTest:"0",
					}],
					skinTest:"",
					needTest:"0",
					usage:"",
					frequency:"",
					course:"",
					isShow: 1
				});
			},
			reShow:function(index){
				var vm = this;
				vm.recipeObj.forEach(function(item,inde){
					if (index == inde) {
						item.isShow = 1 ;
					}else{
						item.isShow = 0 ;
					}
				});
			},
			queryCourse:function(queryString, cb){
				var result = [];
				if (!isNaN(queryString)&&queryString) {
					var units = ['个时','天','周','个月'];
					units.forEach(function(unit){
						result.push({
							value:queryString+unit
						});
					});
				}
				cb(result);
			},
			confirmRecipe:function(){
				let vm = this;
				let recipe ={
					"recipeId": vm.curRecipe.recipeId?vm.curRecipe.recipeId:"",
					"nodeUUID": vm.patient.nodeUUID,
					"content": JSON.stringify(vm.recipeObj),
					"recipeType": "普通",
					"operator": "操作员"
				};
				vm.$axios.addRecipe(recipe).then(function(res){
					vm.recipeDialog = false;
				});
			}
	},
}
	
</script>
<style type="text/css" scoped>
	a:link{
		color: #000000;
		text-decoration: none;
	}
	a:hover{
		color: #ff0000;
		font-weight: bolder;
	}
	a:visited{
		color: #000000;
		text-decoration: none;
	}
	.recipeTop{
		text-align: center;
		font-weight: bolder;
		background-color: #EEEEEE;
		height: 35px;
		line-height: 35px;
		border: 1px solid #CCCCCC;
	}
	.content{
		min-height: 640px;
		border:1px solid #cccccc;
		padding-left: 5px;
		padding-right: 5px;
		font-size: 12pt;
		font-family: 宋体;
		line-height: 30px;
	}
	.infoBar{
		height: 35px;
		line-height: 35px;
		border-bottom: 1px dashed #CCCCCC;
	}
	.infoBar label{
		font-weight: bolder;
	}
	.reciprTitle{
		font-weight: bolder;
		text-align: center;
		font-size: 16pt;
		line-height: 40px;
		margin-bottom: 10px; 
	}
	.recipeBar{
		line-height: 28px;
		padding-left: 35px;
		cursor: pointer;
	}
	.rp{
		font-weight: bolder;
		font-size: 16pt;
		line-height: 40px;
	}
	.drugs{
		border-bottom: 1px dashed #000000;
		margin-bottom: 10px;
	}
	.drug{
		border-bottom: 1px dashed #CCCCCC;
		text-align: center;
	}
	.thTitle{
		text-align: center;
		font-weight: bolder;
	}
	label{
		font-weight: bolder;
	}
	.drugbg{
		background-color: #FFFFF4;
	}
	.line{
		width: 1px;
		height: auto;
		background-color: #000000;
		transform: rotate(15deg);
		/*transform-origin:-30px 0px;*/
		transform-origin:50% 50%;
	}
</style>